import React,{useState} from 'react'
import { View, Text,Image,ScrollView } from '@tarojs/components'

import Banner from '../../components/banner'
import HotList from './hotList'

import './index.scss'

function HotCakes (){
  const [bannerUrl] = useState({url: require('../../static/images/banner2.png')})
  const [hotNavList] = useState( [
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
    {hotImg: require('../../static/images/niunai.png'),text: '吴彦祖'},
  ] )
  const [hotList] = useState([
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
    {hotImg: require('../../static/images/niunai.png'), title:'这里是标题',description:'这里是描述', newPrice:'￥20', oldPrice:'￥28'},
  ])
  return (
    <View className='hot_cakes'>
      {/*banner*/}
      <Banner bannerUrl={bannerUrl} />
      {/*导航栏*/}
      <ScrollView
        scrollX
        enableFlex
        className='hot_nav'>
        {
          hotNavList.map((item,index) => {
            return (
              <View className='hot_nav_item' key={index}>
                <Image className='nav_item_img' src={item.hotImg} />
                <Text className='nav_item_txt'>{item.text}</Text>
              </View>
            )
          })
        }
      </ScrollView>
      {/*热卖列表区*/}
      <ScrollView  scrollY  className='hot_list'>
        <HotList hotList={hotList}  />
      </ScrollView>
    </View>
  )
}

export default HotCakes
